<template>
  <view>
    <!-- 注册成为志愿者的组件 -->
    <view class="topnav">
      <span>首页</span>->登录
    </view>
    <!-- 登录的表单 -->
    <view class="box">
      <view class="topic">请填写信息登录</view>
     <view class="message">
       <label class="label">姓名：</label>
       <view class="gap"></view>
       <u--input
           placeholder="请输入内容"
           border="surround"
           v-model="name"
         ></u--input>
         
         <label class="label">手机号：</label>
         <view class="gap"></view>
         <u--input
             placeholder="请输入内容"
             border="surround"
             v-model="phone"
           ></u--input>
     </view>
     <view class="login">
       <button type="primary" text="确定" @click="login">登录</button>
     </view>
     
     <view class="text">
       <navigator url="/subpkg/become-volunteer/become-volunteer">去注册</navigator>
     </view>
     
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from "vuex"
  export default {
    name: "loginVolunteer",
    data() {
      return {
        name:'',
        phone:''
      }
    },
    computed: {
      ...mapState('m_user',['token'])
    },
    methods: {
      ...mapMutations('m_volunteer',['updateToken_v','updateVolunteerInfo']),
      async login() {
        if(this.token==''){
          return uni.$u.toast('请先微信登录！')
        }
        const {data:res} = await uni.$http.get('/volunteers/'+this.name+'/'+this.phone)
        if(res.code!==200) return uni.$showMsg(res.msg)
        uni.$u.toast('登录成功')
        this.updateToken_v(res.token)
        this.updateVolunteerInfo(res.data)
        uni.navigateTo({
          url:"/subpkg/become-volunteer/become-volunteer"
        });
      }
    },
  }
</script>

<style lang="scss">
  .topnav {
    span {
      font-weight: 800;
    }

    height: 20px;
    line-height: 20px;
    padding: 5px 0 0 5px;
  }
.gap{
  height:5px;
}
.login{
  margin-top:10px;
}
.text{
  margin-top:5px;
  color:blue;
  text-align:center;
}
  .box {
    padding:10px;
    .topic {
      margin: 10px;
      text-align:center;
    }
    .message{
     .label{
       color: #303133;
           font-size: 15px;
     }
    }
    
  }
</style>
